@()(implicit request: RequestHeader)
@main("BLAST") {

	<style>

			.tab-pane form {
				margin-top: 30px;
			}

	</style>

	<script src="@routes.Assets.at("blocks/js/d3.v4.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/blast.js")" type="text/javascript"></script>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">BLAST</h2>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-2">
			<div class="bs-docs-sidebar" role="complementary">
				<ul class="nav bs-docs-sidenav">
					<li class="active"><a href="#blastn" data-toggle="tab">BLASTn</a></li>
					<li class=""><a href="#blastp" data-toggle="tab">BLASTp</a></li>
				</ul>
			</div>
		</div>

		<div class="col-sm-9 tab-content myform" >

			<div class="tab-pane active" id="blastn">
				<form class="form-horizontal" method="get" id="form">

					<div class="form-group" >
						<label class="control-label col-sm-3">Enter FASTA sequences:</label>
						<div class="col-sm-8">
							<textarea class="form-control monospace" name="queryText" id="queryText" rows="5"></textarea>
							<span class="help-block">
								e.g.,&nbsp;<a href="javascript:void(0);" class="myShowExample"><em id="egQuery">
								example</em></a></span>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Or, upload file:</label>
						<div class="col-sm-8">
							<input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
							data-show-upload="false">
							<span class="help-block"><a href="@routes.ToolController.downloadExampleData()?fileName=blastn_example.fa"><em>
								Example file</em></a></span>
						</div>
					</div>

					<div class="form-group" id="againstType">
						<label class="control-label col-sm-3">Against:</label>
						<div class="col-sm-5">
							<select class="form-control" name="againstType">
								<option selected  value="macadamiaGene">Macadamia integrifolia HAES 741 CDS</option>
								<option  value="macadamiaGenome">Macadamia integrifolia HAES 741 genome</option>
								<option  value="mintegChloroplastGenome">Macadamia integrifolia chloroplast genome</option>
								<option  value="mintegMitochondrionGenome">Macadamia integrifolia mitochondrion genome</option>
								<option  value="minteg2022Genome">Macadamia integrifolia HAES 344 genome</option>
								<option  value="mjanseniGenome">Macadamia jansenii genome</option>
								<option  value="mtetraGenome">Macadamia tetraphylla genome</option>
								<option  value="mtetraPlastidGenome">Macadamia tetraphylla chloroplast genome</option>
								<option  value="mtetraMitochondrionGenome">Macadamia tetraphylla mitochondrion genome</option>
								<option  value="mterniGenome">Macadamia ternifolia genome</option>
								<option  value="mterniPlastidGenome">Macadamia ternifolia chloroplast genome</option>
								<option  value="mterniMitochondrionGenome">Macadamia ternifolia mitochondrion genome</option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Evalue:</label>
						<div class="col-sm-2">
							<input class="form-control" name="evalue" id="evalue" value="1e-5">
						</div>

						<div style="display: none">
							<label class="control-label col-sm-3">Word size:</label>
							<div class="col-sm-2">
								<input class="form-control" name="wordSize" id="wordSize" value="28">
							</div>
						</div>


					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Max target seqs:</label>
						<div class="col-sm-2">
							<input class="form-control" name="maxTargetSeqs" id="mCharacteristic" value="10">
						</div>
					</div>

					<hr>
					<div class="form-group">
						<div class="actions col-sm-offset-3 col-sm-3">
							<button type="button" class="btn btn-primary myBlast" style="width: 90%;" id="search">
								Run</button>
						</div>
						<div class="actions  col-sm-3">
							<button type="reset" class="btn btn-primary" style="width: 90%;">
								Reset</button>
						</div>
					</div>
				</form>
			</div>

			<div class="tab-pane " id="blastp">
				<form class="form-horizontal" method="get" id="form">

					<div class="form-group" >
						<label class="control-label col-sm-3">Enter FASTA sequences:</label>
						<div class="col-sm-8">
							<textarea class="form-control monospace" name="queryText" id="queryText" rows="5"></textarea>
							<span class="help-block">
								e.g.,&nbsp;<a  href="javascript:void(0);"><em class="myShowExample">
								example</em></a></span>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Or, upload file:</label>
						<div class="col-sm-8">
							<input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
							data-show-upload="false">
							<span class="help-block"><a href="@routes.ToolController.downloadExampleData()?fileName=blastp_example.fa"><em>
								Example file</em></a></span>
						</div>
					</div>

					<div class="form-group" id="againstType">
						<label class="control-label col-sm-3">Against:</label>
						<div class="col-sm-4">
							<select class="form-control" name="againstType">
								<option value="macadamiaPep"><i>Macadamia integrifolia HAES 741</i></option>
								<option value="minteg2022Pep"><i>Macadamia integrifolia HAES 344</i></option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Evalue:</label>
						<div class="col-sm-2">
							<input class="form-control" name="evalue" id="evalue" value="1e-5">
						</div>

						<div style="display: none">
							<label class="control-label col-sm-3">Word size:</label>
							<div class="col-sm-2">
								<input class="form-control" name="wordSize" id="wordSize" value="3">
							</div>
						</div>

					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Max target seqs:</label>
						<div class="col-sm-2">
							<input class="form-control" name="maxTargetSeqs" id="mCharacteristic" value="10">
						</div>
					</div>

					<hr>
					<div class="form-group">
						<div class="actions col-sm-offset-3 col-sm-3">
							<button type="button" class="btn btn-primary myBlast" style="width: 90%;" id="search" >
								Run</button>
						</div>
						<div class="actions  col-sm-3">
							<button type="reset" class="btn btn-primary" style="width: 90%;">
								Reset</button>
						</div>
					</div>
				</form>
			</div>

		</div>
	</div>

	<div id="result" style="display: none">
		<hr>
		<h4 style="color: black">Result:
			<button class="btn btn-primary myDownloadXls"><i class="fa fa-download"></i>&nbsp;Download</button>
		</h4>

		<iframe id="frame" style="width: 100%;
			margin-left: -7px;" height="1000px" frameborder="0" align="middle">

		</iframe>

	</div>

	<script>
			$(function () {

				Blast.init

			})

	</script>
}
